<%--
  Author: chengwei
  Date: 2016/7/15
  Time: 16:16
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>管理</title>
    <link rel="stylesheet" href="/resource/bootstrap/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="/resource/js/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/resource/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-default" onclick="showColumnModal();">新增</button>
<table class="table table-hover">

    <thead>
    <tr>
        <th>栏目名称</th>
        <th>显示顺序</th>
        <th style="width: 200px;">操作</th>
    </tr>

    </thead>
    <c:forEach items="${columns}" var="column">
        <tr id="column_${column.columnId}">
            <td>${column.name}</td>
            <td>${column.showOrder}</td>
            <td>
                <button type="button" class="btn btn-default btn-sm" onclick="showColumnModal('${column.columnId}');">
                    修改
                </button>
                <button type="button" class="btn btn-default btn-sm" onclick="delColumn('${column.columnId}');">删除
                </button>
            </td>
        </tr>
    </c:forEach>
</table>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

</div>
</body>
</html>

<!-- Modal -->

<script>
    function showColumnModal(id) {
        $("#myModal").load("/user/column/form", {column_id: id}, function () {
//            $("#columnId").val(id);
//            $("#name").val(d.name);
//            $("#showOrder").val(d.showOrder);
            $("#myModal").modal("show");
        });

    }
    

    function delColumn(id) {
        $.post("/user/column/delete", {column_id: id}, function () {
            $("#column_" + id).remove();
        });
    }

</script>